<template>
  <!-- 进出口货物页面 -->
  <div class="container">
    <div class="section section01">
      <border-wrap>
        <div class="title"><h2>本年货物量</h2></div>
        <div class="content">
          <div class="content-item left-content">
            <h3>货物进出口总量趋势（吨）</h3>
            <div class="chart-item" id="chart01"></div>
          </div>
          <div class="content-item right-content">
            <div class="tab-list">
              <div class="neu-tab-list">
                <div class="tab-item active"><span>本年进口货物种类排名</span></div>
                <div class="tab-item"><span>本年出口货物种类排名</span></div>
              </div>
            </div>
            <div class="rank-list-wrap">
              <rank-list
                :dataList="rankData01"
                :current="1"
              ></rank-list>
            </div>
          </div>
        </div>
      </border-wrap>
    </div>
    <div class="section section02">
      <border-wrap>
        <div class="title"><h2>辐射城市</h2></div>
        <div class="content">
          <div class="content-item left">
            <div class="map-chart" id="mapChart"></div>
          </div>
          <div class="content-item right">
            <div class="item-main">
              <div class="main-list">
                <div class="main-title"><span>出口货物辐射城市top5</span></div>
                <div class="main-list-wrap">
                  <rank-list
                    :dataList="rankData02"
                    size="small"
                  ></rank-list>
                </div>
              </div>
              <div class="main-chart">
                <div class="neu-pie-chart">
                  <div class="chart-detail">
                    <span>南宁进口总量</span>
                    <b>148,6586</b>
                  </div>
                  <div class="chart-content" id="chartPieIn"></div>
                </div>
              </div>
            </div>
            <div class="item-main">
              <div class="main-list">
                <div class="main-title"><span>进口货物辐射城市top5</span></div>
                <div class="main-list-wrap">
                  <rank-list
                    :dataList="rankData03"
                    size="small"
                  ></rank-list>
                </div>
              </div>
              <div class="main-chart">
                <div class="neu-pie-chart">
                  <div class="chart-detail">
                    <span>南宁进口总量</span>
                    <b>148,6586</b>
                  </div>
                  <div class="chart-content" id="chartPieOut"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </border-wrap>
    </div>
    <div class="section section03">
      <border-wrap>
        <div class="title"><h2>报关单量与上月货物量</h2></div>
        <div class="content">
          <div class="product-target">
            <div class="target-item">
              <div class="neu-table-data-card">
                <div class="card-icon card-ceil"><img src="../../assets/images/icon-small-car.png" alt=""></div>
                <div class="card-total card-ceil">
                  <h2>21,666</h2>
                  <small>上月货物量(吨)</small>
                </div>
                <div class="card-percent card-ceil">
                  <h2>
                    <i class="iconfont icon-arrow"></i>
                    <span>23%</span>
                  </h2>
                  <small>同比</small>
                </div>
                <div class="card-percent card-ceil">
                  <h2>
                    <i class="iconfont icon-arrow"></i>
                    <span>23%</span>
                  </h2>
                  <small>环比</small>
                </div>
              </div>
            </div>
            <div class="target-item">
              <div class="neu-table-data-card">
                <div class="card-icon card-ceil"><img src="../../assets/images/icon-list.png" alt=""></div>
                <div class="card-total card-ceil">
                  <h2>21,666</h2>
                  <small>上月货物量(吨)</small>
                </div>
                <div class="card-percent card-ceil">
                  <h2>
                    <i class="iconfont icon-arrow"></i>
                    <span>23%</span>
                  </h2>
                  <small>同比</small>
                </div>
                <div class="card-percent card-ceil">
                  <h2>
                    <i class="iconfont icon-arrow"></i>
                    <span>23%</span>
                  </h2>
                  <small>环比</small>
                </div>
              </div>
            </div>
          </div>
          <div class="product-percent">
            <div class="title">
              <h3>上月货物量与货物报关单量比</h3>
            </div>
            <div class="product-percent-list">
              <div class="product-percent-item">
                <div class="chart-item">
                  <div class="chart-item-main">
                    <div class="pie-circle">
                      <div class="info">
                        <h4>出口比</h4>
                        <h2>45%</h2>
                        <h4>货物量：45</h4>
                        <h4>报关单量：100</h4>
                      </div>
                      <div class="pie-main" id="pieChart01"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="product-percent-item">
                <div class="chart-item">
                  <div class="chart-item-main">
                    <div class="pie-circle">
                      <div class="info">
                        <h4>出口比</h4>
                        <h2>45%</h2>
                        <h4>货物量：45</h4>
                        <h4>报关单量：100</h4>
                      </div>
                      <div class="pie-main" id="pieChart02"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="product-percent-item product-rank-list">
                <div class="rank-item">
                  <h4>出口比TOP10</h4>
                  <div class="rank-item-main">
                    <div class="neu-rank-list-normal">
                      <ul>
                        <li v-for="item in 10" :key="item">
                          <span>1</span>
                          <span>柠檬酸</span>
                          <span><i class="iconfont icon-arrow"></i><b>2</b></span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="rank-item">
                  <h4>进口比TOP10</h4>
                  <div class="rank-item-main">
                    <div class="neu-rank-list-normal">
                      <ul>
                        <li v-for="item in 10" :key="item">
                          <span>1</span>
                          <span>柠檬酸</span>
                          <span><i class="iconfont icon-arrow-down"></i><b>2</b></span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="product-trend">
            <div class="title">
              <h3>货物进出口报关单量趋势（吨）</h3>
            </div>
            <div class="trend-chart">
              <div class="chart-item" id="chartTrend"></div>
            </div>
          </div>
        </div>
      </border-wrap>
    </div>
  </div>
</template>

<script>
import borderWrap from '../../components/commons/borderWrap.vue';
import rankList from '../../components/commons/rankList.vue';
import {
  createLineBarChart,
  createPieChart,
  createGradientColor,
  createEndPointPieChart,
  createMapChart
} from '../../utils/plugins/common'
export default {
  name: "jinchuHuowu",
  components:{
    borderWrap,
    rankList
  },
  data(){
    return {
      rankData01:[{
        name:"矿石",
        value:1000
      },{
        name:"矿石",
        value:1000
      },{
        name:"矿石",
        value:1000
      },{
        name:"矿石",
        value:1000
      },{
        name:"矿石",
        value:1000
      },{
        name:"矿石",
        value:1000
      },{
        name:"矿石",
        value:1000
      },{
        name:"矿石",
        value:1000
      },{
        name:"矿石",
        value:1000
      },{
        name:"矿石",
        value:1000
      }],
      rankData02:[{
        name:"矿石",
        percent:{
          value:23,
          status:1
        },
        value:1000
      },{
        name:"矿石",
        percent:{
          value:23,
          status:1
        },
        value:1000
      },{
        name:"矿石",
        percent:{
          value:23,
          status:0
        },
        value:1000
      },{
        name:"矿石",
        percent:{
          value:23,
          status:0
        },
        value:1000
      },{
        name:"矿石",
        percent:{
          value:23,
          status:0
        },
        value:1000
      }],
      rankData03:[{
        name:"矿石",
        percent:{
          value:23,
          status:0
        },
        value:1000
      },{
        name:"矿石",
        percent:{
          value:23,
          status:0
        },
        value:1000
      },{
        name:"矿石",
        percent:{
          value:23,
          status:0
        },
        value:1000
      },{
        name:"矿石",
        percent:{
          value:23,
          status:0
        },
        value:1000
      },{
        name:"矿石",
        percent:{
          value:23,
          status:0
        },
        value:1000
      }]
    }
  },  
  mounted(){
    createMapChart({
      id:"mapChart",
      config:{
        name: "china",
        itemColor: createGradientColor("toBottom",["#1cfbfe","#3348e7"])
      }
    })

    createLineBarChart({
      id:"chart01",
      config:{
        yAxisType:"double", //simple,double
        xAxisData:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        data:[{
          type:"line",
          name:"出口",
          axisIndex:1,
          data:[100,110,78,97,298,356,121,50,99,199,356,121]
        },{
          type:"line",
          name:"进口",
          axisIndex:1,
          data:[200,210,178,197,398,456,221,150,199,299,456,221]
        },{
          type:"bar",
          name:"出口",
          data:[100,110,78,97,298,356,121,50,99,199,356,121]
        },{
          type:"bar",
          name:"进口",
          data:[200,210,178,197,398,456,221,150,199,299,456,221]
        }]
      },
      option:{
        color:[
          createGradientColor("toBottom",["rgba(0, 211, 114, 1)","rgba(0, 211, 114, 0.6)"]),
          createGradientColor("toBottom",["rgba(70, 174, 247, 1)","rgba(0, 233, 255, 0.6)"])
        ],
        grid:{
          top: "10%"
        }
      }
    })
    createLineBarChart({
      id:"chartTrend",
      config:{
        yAxisType:"double", //simple,double
        xAxisData:["1月","2月","3月","4月","5月","6月","7月","8月","9月"],
        data:[{
          type:"line",
          name:"出口",
          axisIndex:1,
          data:[100,110,78,97,298,356,121,50,99]
        },{
          type:"line",
          name:"进口",
          axisIndex:1,
          data:[200,210,178,197,398,456,221,150,199]
        },{
          type:"pictorialBar",
          name:"出口",
          data:[100,110,78,97,298,356,121,50,99]
        },{
          type:"pictorialBar",
          name:"进口",
          data:[200,210,178,197,398,456,221,150,199]
        }]
      },
      option:{
        color:[
          createGradientColor("toBottom",["rgba(0, 211, 114, 1)","rgba(0, 211, 114, 0.6)"]),
          createGradientColor("toBottom",["rgba(70, 174, 247, 1)","rgba(0, 233, 255, 0.6)"])
        ],
        grid:{
          top: "20%"
        }
      }
    })


    createPieChart({
      id:"chartPieIn",
      config:{
        data:[{
          name:"aaa",
          value:10
        },{
          name:"bbb",
          value:10
        },{
          name:"ccc",
          value:10
        },{
          name:"ddd",
          value:10
        },{
          name:"eee",
          value:10
        },{
          name:"fff",
          value:10
        }]
      },
      option:{
        color:["#C4292D","#D87D30","#DFAA04","#5287D0","#55ABB7","#49759B"],
      }
    })
    createPieChart({
      id:"chartPieOut",
      config:{
        data:[{
          name:"aaa",
          value:10
        },{
          name:"bbb",
          value:10
        },{
          name:"ccc",
          value:10
        },{
          name:"ddd",
          value:10
        },{
          name:"eee",
          value:10
        },{
          name:"fff",
          value:10
        }]
      },
      option:{
        color:["#C4292D","#D87D30","#DFAA04","#5287D0","#55ABB7","#49759B"],
      }
    })
    
    
    createEndPointPieChart({
      id:"pieChart01",
      config:{
        value:0.75,
        colorType: "blue",

      }
    })
    createEndPointPieChart({
      id:"pieChart02",
      config:{
        value:0.75,
        colorType: "purple",

      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/style/mixins.scss';
.container{
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  .section{
    position: absolute;
    div.title{
      h2{
        height: 30px;
        padding-left: 20px;
        line-height: 30px;
        font-size: 16px;
      }
    }
    div.content{
      height: calc(100% - 30px);
      box-sizing: border-box;
      padding: 20px;
    }
    &.section01{
      top: 0;
      left: 0;
      width: 1200px;
      height: calc((100% - 20px)/2);
      div.content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .content-item{
          height: 100%;
          &.left-content{
            width: 60%;
            h3{
              height: 20px;
              font-size: 14px;
            }
            .chart-item{
              height: calc(100% - 20px);
            }
          }
          &.right-content{
            width: 40%;
            box-sizing: border-box;
            padding: 0 20px 0 60px;
            .tab-list{
              height: 30px;
              margin-bottom: 10px;
            }
            .rank-list-wrap{
              height: calc(100% - 40px);
            }
          }
        }
      }
    }
    &.section02{
      bottom: 0;
      left: 0;
      width: 1200px;
      height: calc((100% - 20px)/2);
      .content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .content-item{
          width: 50%;
          height: 100%;
          &.left{
            .map-chart{
              width: 100%;
              height: 100%;
            }
          }
          &.right{
            .item-main{
              height: calc((100% - 20px)/2);
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 20px;
              &:first-child{
                margin-top: 0;
              }
              .main-list{
                height: 100%;
                width: 65%;
                .main-title{
                  height: 30px;
                  line-height: 30px;
                  border-bottom: 2px solid #00FFFF;
                  margin-bottom: 10px;
                  width: 200px;
                }
                .main-list-wrap{
                  height: calc(100% - 40px);
                  .rank-list{
                    ul{
                      li{
                        i.rank-num{
                          width: 30px;
                        }
                      }
                    }
                  }
                }
              }
              .main-chart{
                box-sizing: border-box;
                height: 100%;
                width: 35%;
                box-sizing: border-box;
                padding-top: 40px;
                position: relative;                
              }
            }
          }
        }
      }
    }
    &.section03{
      top: 0;
      right: 0;
      width: calc(100% - 1220px);
      height: 100%;
      .product-target{
        .target-item{
          height: 110px;
          margin-top: 10px;
          .card-ceil{
            width: 25%;
          }
          &:first-child{
            margin-top: 0;
          }
        }
      }
      .product-percent{
        margin-top: 20px;
        div.title{
          h3{
            height: 20px;
            line-height: 20px;
            font-size: 14px;
          }
        }
        .product-percent-list{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .product-percent-item{
            width: 30%;
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
            .chart-item{
              width: 185px;
              height: 185px;
              background: url(../../assets/images/pie-bg.png) no-repeat center center / 100% auto;
              .chart-item-main{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .pie-circle{
                  width: 80%;
                  height: 80%;
                  border-radius: 50%;
                  border: 3px solid #00FFFF;
                  position: relative;
                  .info{
                    position: absolute;
                    top: -8px;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    h2{
                      color: #00FFFF;
                      font-size: 18px;
                    }
                    h4{
                      color: #FFFFFF;
                      font-size: 12px;
                    }
                  }
                  .pie-main{
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
            &.product-rank-list{
              width: 40%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .rank-item{
                width: 50%;
                height: 100%;
                border-left: 1px solid rgba(3,112,255,.4);
                padding-left: 10px;
                &:first-child{
                  border: none;
                  padding-left: 0;
                  padding-right: 10px;
                }
                h4{
                  height: 20px;
                  line-height: 20px;
                  font-size: 12px;
                  color: #00BBFF;
                  white-space: nowrap;
                  font-weight: bold;
                  margin-bottom: 10px;
                }
                .rank-item-main{
                  height: calc(100% - 30px);
                }
              }
            }
          }
        }
        
      }
      .product-trend{
        margin-top: 20px;
        height: calc(100% - 540px);
        div.title{
          h3{
            height: 20px;
            line-height: 20px;
            font-size: 14px;
          }
        }
        .trend-chart{
          width: 100%;
          height: calc(100% - 20px);
          .chart-item{
            height: 100%;
          }
        }
      }
    }
  }
}

</style>